<template>
  <div>
    <div class="button-group">
      <a-button class="fr" type="primary" icon="plus" @click="addEmpInfo">
        办理入职
      </a-button>
      <div class="mr20" style="display: inline-block;width: 180px;">
        <a-input id="nameOrPhone" v-model="nameOrPhone" placeholder="姓名/手机号" @blur="select" @keyup.enter.native="select">
          <a-icon slot="prefix" type="search" style="color: rgba(242, 157, 86, 0.73);font-size: 17px" />
        </a-input>
      </div>
      <a-popover placement="bottomLeft" trigger="click" class="filter-popover">
        <template slot="content">
          <a-button>筛选</a-button>
          <div class="filter">
            <div class="filterItem">
              <label>性别</label>
              <a-select v-model="sex" label-in-value allow-clear :options="sexOptions" @change="e => select(e, 'sex')" />
            </div>
            <div v-if="selectId != 3" class="filterItem">
              <label>聘用形式</label>
              <a-select
                v-model="employType"
                label-in-value
                allow-clear
                :options="employTypeOptions"
                @change="e => select(e, 'employType')"
              />
            </div>

            <div class="filterItem">
              <label>部门</label>
              <a-tree-select v-model="depId" label-in-value :tree-data="depInfoOptions" allow-clear @change="e => select(e, 'depId')" />
            </div>

            <div v-if="selectId != 3" class="filterItem">
              <label>转正状态</label>
              <a-select
                v-model="formalType"
                label-in-value
                allow-clear
                :options="formalTypeOptions"
                @change="e => select(e, 'formalType')"
              />
            </div>
          </div>
        </template>

        <a-button class="mr20">筛选</a-button>
      </a-popover>
    </div>

    <a-row class="lh48 h48">
      <a-col v-if="selectBox">
        找到{{ total }}个
        <a-tag v-if="sexvalue" color="#6A66F6" class="ml20 mr12" closable @close="preventDefault('sex')">{{ sexvalue }}</a-tag>
        <a-tag v-if="depIdvalue" class="mr12" color="#6A66F6" closable @close="preventDefault('depId')">{{ depIdvalue }}</a-tag>
        <a-tag v-if="employTypevalue" class="mr12" closable color="#6A66F6" @close="preventDefault('employType')">{{
          employTypevalue
        }}</a-tag>
        <a-tag v-if="formalTypevalue" class="mr20" color="#6A66F6" closable @close="preventDefault('formalType')">{{
          formalTypevalue
        }}</a-tag>
        的员工 <a-button type="link" @click="cancelSelect">取消筛选</a-button>
      </a-col>
    </a-row>

    <div class="table">
      <a-table
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange
        }"
        :columns="managementList.title"
        :row-key="record => record.id"
        :data-source="managementList.data"
        :pagination="managementList.pagination"
        :loading="managementList.loading"
        size="middle"
        @change="handleTableChange"
      >
        <template slot="operate" slot-scope="text, record">
          <a-button size="small" type="link" @click="detail(record)">
            确认到岗
          </a-button>
          <a-divider type="vertical" />
          <a-button size="small" type="link" @click="transfer(record)">
            调岗
          </a-button>
          <a-divider type="vertical" />
          <a-button size="small" type="link" @click="detail(record)">
            详情
          </a-button>
        </template>
      </a-table>
    </div>
    <a-drawer title="办理入职" :width="540" :visible="visibleDrawer" :wrap-style="{ overflow: 'auto' }" @close="onCloseDrawer">
      <a-form :form="form" layout="Vertical" @submit="handleSubmit">
        <a-row :gutter="16">
          <a-form-item label="姓名:" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
            <a-input
              v-decorator="[
                'name',
                {
                  rules: [{ required: true, message: '请输入姓名' }]
                }
              ]"
              placeholder="请输入姓名"
            />
          </a-form-item>
        </a-row>
        <a-row :gutter="16">
          <a-form-item label="手机号码:" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
            <a-input v-decorator="['phone']" placeholder="请输入手机号码" />
          </a-form-item>
        </a-row>

        <a-row :gutter="16">
          <a-form-item label="聘用形式:" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
            <a-select v-decorator="['personSize']" placeholder="请选择人数">
              <a-select-option v-for="(item, index) in person" :key="index" :value="item">{{ item }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-row>

        <a-row :gutter="16">
          <a-form-item label="部门:" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
            <a-select v-decorator="['industry']" placeholder="请选择行业">
              <a-select-option v-for="(item, index) in industry" :key="index" :value="item">{{ item }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-row>
        <a-row :gutter="16">
          <a-form-item label="岗位:" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
            <a-select v-decorator="['industry']" placeholder="请选择行业">
              <a-select-option v-for="(item, index) in industry" :key="index" :value="item">{{ item }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-row>
        <a-row :gutter="16">
          <a-form-item label="预计入职日期:" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
            <a-select v-decorator="['industry']" placeholder="请选择行业">
              <a-select-option v-for="(item, index) in industry" :key="index" :value="item">{{ item }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-row>

        <div class="drawer-footer-box">
          <a-button :style="{ marginRight: '12px' }" @click="onCloseDrawer">
            取消
          </a-button>
          <a-button type="primary" html-type="submitDrawer">确定</a-button>
        </div>
      </a-form>
    </a-drawer>
    <a-modal
      :title="titleSubmit"
      :visible="visibleSubmit"
      :confirm-loading="confirmLoading"
      cancel-text="关闭"
      ok-text="继续办理"
      @ok="handleOkSubmit"
      @cancel="handleCancelSubmit"
    >
      <div>
        <p>提交成功</p>
        <p>已自动发送入职邀请至对方手机 可在入职管理里查看员工入职相关信息</p>
      </div>
      <div>
        <p>待审批</p>
        <p>已提交至审批流程 待审批通过后，可在入职管理里查看员工入职信息</p>
        <p>审批通过后自动发送入职邀请至对方手机</p>
      </div>
      <ul>
        <li>
          <img src="" alt="" />
          <div>
            <p>入职模板</p>
            <p>用于试用期员工转正审批专用</p>
          </div>
        </li>
      </ul>
    </a-modal>
  </div>
</template>
